<template>
  <view class="page">
    <!--评价筛选-->
    <view class="evaluate-filtrate">
      <view class="filtrate-list">
        <view class="list">
          <text class="action">全部1.8万</text>
        </view>
        <view class="list">
          <text>好评1.4万+</text>
        </view>
        <view class="list">
          <text>中评1.2万+</text>
        </view>
        <view class="list">
          <text>中评99+</text>
        </view>
      </view>
    </view>
    <view class="evaluate-data">
      <scroll-view  scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop" @scrolltolower="onreachBottom">
        <view class="evaluate-list">
          <view class="list" v-for="(item,index) in goodsEvaluateList" :key="index">
            <view class="user-info">
              <view class="thumb">
                <!-- 头像 -->
                <image :src="item.user.avatarUrl" mode=""></image>
              </view>
              <view class="nickname-grade">
                <view class="nickname">
                  <!-- 昵称 -->
                  <text>{{item.user.nickName}}</text>
                </view>
                <view class="grade">
                  <!-- 评价星级 -->
                  <view class="star">
                    <!-- <text class="cuIcon-favorfill lg text-gray" v-for="(value,idx) in 5" :key="idx"></text> -->
                    <u-rate size="16" :v-model="item.evaluateStar"  disabled="true"></u-rate>
                  </view>
                  <view class="date">
                    <!-- 评价时间 -->
                    <text>{{item.evaluateDate}}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="content">
              <view class="character">
                <!-- 评价内容 -->
                <text class="two-omit">{{item.content}}</text>
              </view>
              <view class="attr">
                <!-- 商品规格 -->
                <text v-if="goods.goodsColor && goods.goodsSize">{{ goods.goodsColor + goods.goodsSize}}</text>
                <text v-else>{{ goods.goodsColor || goods.goodsSize  ||'蓝色'}}</text>
              </view>
              <view class="thumb-list">
                <view class="video-info" @click="isVideoShow = true">
                  <image src="http://cn.shichengtai.xyz/goods/goods_thumb_09.png" class="picture"></image>
                  <view class="shade">
                    <text class="iconfont icon-bofang"></text>
                  </view>
                </view>
                <!-- 图片或视频 -->
                <block v-for="(value,idx) in item.urlTypeList" :key="idx">
                  <view class="list" v-if="value==='image'"  @click="onPreview(item.urlList,idx)" >
                    <image class="list" :src="item.urlList[idx]"></image>
                  </view>
                  <view class="list" v-if="value==='video'" >
                    <video class="list" :src="item.urlList[idx]" autoplay loop muted :show-play-btn="false" :controls="false"
                            :objectFit="cover" ></video>
                  </view>
                  
                </block>
              </view>
            </view>
          </view>
        </view>
        
      </scroll-view>
      
    </view>
    <!--视频播放-->
    <view class="video-win" @click="onCloseVideo">
      <view class="cu-modal" :class="{'show':isVideoShow}">
        <view class="cu-dialog" @click.stop>
          <view class="bg-img" v-show="isVideoShow">
            <video id="evaluate-video"
              src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          // 评价类型
          evaluateType: '',
          // 商品Id
          goodsId: 0,
          // 页码值
          pageCurrent: 1,
          // 每页显示多少条数据
          pageSize: 10
        },
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
        currentTotal:0,//总记录数
        all:0,//所有评价  数量
        good:0,//好评数量
        center:0,//中评数量
        lower:0,//差评数量
        goods:{},//商品信息
        goodsEvaluateList:[],//商品评价列表
        isVideoShow: false,//视频播放  弹窗
        // urls: [
        //   'http://cn.shichengtai.xyz/goods/yf_02.jpg',
        //   'http://cn.shichengtai.xyz/goods/wen_01.jpg',
        //   'http://cn.shichengtai.xyz/goods/class_01.jpg',
        //   'http://cn.shichengtai.xyz/goods/yf_01.png'
        // ],
        videoContext: '',
      };
    },
    onReady: function(res) {
      this.videoContext = uni.createVideoContext('evaluate-video')
    },
    onLoad(params) {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值   可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight - 100
      this.queryObj.goodsId= params.goods_id || -1;
      this.getGoodsEvaluateType();
      this.getGoods();
      this.getGoodsEvaluateListByPageByGoodsId();
      
    },
    methods: {
      //获取 每种评价分类  的数量
      async getGoodsEvaluateType(cb){
        // ** 打开节流阀
        this.isloading = true
        const {data: res} = await uni.$http.get('/goodsEvaluate/getGoodsEvaluateTypeCountByGoodsId', {"goodsId": this.queryObj.goodsId})
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data)
        this.all=res.data.all;
        this.good=res.data.good;
        this.center=res.data.center;
        this.lower=res.data.lower;
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
      },
      //获取商品信息
      async getGoods(){
        const {data: res} = await uni.$http.get('/goods/getGoodsById', {"goodsId": this.queryObj.goodsId})
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data)
        this.goods=res.data;
      },
      //分页查询  根据评价类型 和商品id
      async getGoodsEvaluateListByPageByGoodsId(cb){
        // ** 打开节流阀
        this.isloading = true
        // 发起请求
        const {data: res} = await uni.$http.get('/goodsEvaluate/getGoodsEvaluateListByGoodsId', this.queryObj)
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data)
        // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
        this.goodsEvaluateList = [...this.goodsEvaluateList, ...res.data.records];
        this.currentTotal=res.data.total;
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        setTimeout(()=>{
          // ** 关闭节流阀
          this.isloading = false
        },1000)
      },
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false;
        this.goodsEvaluateList = [];
        this.currentTotal=0;
        this.queryObj.pageCurrent=1;
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getGoodsEvaluateType(() => uni.stopPullDownRefresh());
        this.getGoodsEvaluateListByPageByGoodsId(() => uni.stopPullDownRefresh());
      },
      // scroll-view到底部加载更多
      onreachBottom() {
        console.log("上拉触底")
        // 判断是否正在请求其它数据，如果是，则不发起额外的请求
        if (this.isloading) return uni.$showMsg("正在加载下一页")
        // 判断是否还有下一页数据     公式：当前的页码值 * 每页显示多少条数据 >= 总数条数
        if (this.queryObj.pageCurrent * this.queryObj.pageSize >= this.currentTotal) return uni.$showMsg('数据加载完毕！')
        // 让页码值自增 +1
        this.queryObj.pageCurrent += 1
        // 重新获取列表数据
        this.getGoodsEvaluateListByPageByGoodsId();
      },
      
      
      /**
       * 图片点击预览
       * @param item
       * @param index
       */
      onPreview(item, index) {
        uni.previewImage({
          urls: item,
          indicator: 'number',
          current: index,
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
      /**
       * 关闭视频点击
       */
      onCloseVideo() {
        this.videoContext.pause();
        this.isVideoShow = false;
      }
    }
  }
</script>

<style scoped lang="scss">
  /*每个页面公共css */
  @import '/colorui/main.css';
  @import '/colorui/icon.css';
  @import '/style/FontStyle.css';

  .page {
    background-color: #f6f6f6;
  }

  /*评价筛选*/
  .evaluate-filtrate {
    padding: 0 30rpx;
    height: 200rpx;
    background-color: #ffffff;
    border-radius: 0 0 10rpx 10rpx;

    .filtrate-list {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 20rpx 0;

      .list {
        display: flex;
        margin-right: 20rpx;
        margin-bottom: 20rpx;

        text {
          //display: inline-table;
          padding: 6rpx 30rpx;
          font-size: 24rpx;
          color: #222222;
          background-color: $rgba-02;
          border: 1px solid transparent;
          border-radius: 60rpx;
        }

        .action {
          border: 1px solid $base;
          color: $base;
        }
      }
    }
  }

  /* 评价 */
  .evaluate-data {
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 10rpx;

    .evaluate-list {
      width: 100%;

      >.list {
        border-bottom: 1px solid #f6f6f6;
      }

      .user-info {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80rpx;

        .thumb {
          width: 60rpx;
          height: 60rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }

        .nickname-grade {
          width: 100%;
          height: 60rpx;
          margin-left: 20rpx;

          .nickname {
            display: flex;
            align-items: center;

            text {
              font-size: 24rpx;
              color: #212121;
            }
          }

          .grade {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 6rpx;

            .star {
              display: flex;
              align-items: center;

              text {
                font-size: 24rpx;
                color: $base;
              }
            }

            .date {
              display: flex;
              align-items: center;

              text {
                font-size: 24rpx;
                color: #999999;
              }
            }
          }
        }
      }

      .content {
        width: 100%;

        .character {
          display: flex;
          align-items: center;
          padding: 10rpx 0;

          text {
            font-size: 24rpx;
            color: #333333;
          }
        }

        .attr {
          display: flex;
          align-items: center;
          padding: 10rpx 0;

          text {
            font-size: 24rpx;
            color: #CCCCCC;
          }
        }

        .thumb-list {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          //height: 200rpx;
          margin: 10rpx 0;

          .video-info {
            position: relative;
            width: 220rpx;
            height: 220rpx;
            margin-right: 2%;

            .picture {
              width: 100%;
              height: 100%;
            }

            .shade {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.3);

              text {
                position: absolute;
                left: 50%;
                top: 50%;
                font-size: 72rpx;
                color: #ffffff;
                transform: translate(-50%, -50%);
              }
            }
          }

          >.list {
            width: 220rpx;
            height: 220rpx;
            margin-right: 2%;
            margin-bottom: 15rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          >.list:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .video-win {
    .cu-dialog {
      background-color: transparent;
    }

    .bg-img {
      background-color: transparent;

      video {
        width: 100%;
      }
    }
  }
</style>
